import React from "react";
import './Home.css'
import Page from "./Page";
class Home extends React.Component
{
    constructor()
    {
        super();
        this.state = {
            currentIndex: 0,
            pageIndex:0
        }
        
    }

    componentDidMount()
    {
        console.log(this.props.children);
    }


    changeIndex(index)
    {
        this.setState({
            currentIndex: index,
            pageIndex:index
        })
    }

    render()
    {
        const { datas } = this.props;
        console.log(datas);
        return (
            <div>
                 <div className="navBar">
            {datas.map((item,index) => {
                return (<div
                      key={index}
                      className={this.state.currentIndex == index ? 'active' : ''}
                      onClick={()=>this.changeIndex(index)}
                >
                     {this.props.children(item)}
                </div>)
            })}
        </div>
         <div className="page"><Page index={this.state.pageIndex}></Page></div>
           </div>)
    }
}

export default Home;